<template>
  <div class="aaff8b8f eb830e32">
    <div class="cefa5c26 focused">
      <div class="dd442025 b699646e">
        <div class="fad49dec">
          <textarea
            id="chat-input"
            class="c92459f0"
            placeholder="请输入，Enter键发送，Shift+Enter键换行"
            rows="2"
            v-model="value"
            @keydown.enter="handleEnter"
          ></textarea>
          <div class="b13855df"></div>
        </div>
        <div class="ec4f5d61">
          <el-select
            v-model="modelId"
            style="width: 186px"
            @change="handleSelect"
            :disabled="props.state"
          >
            <el-option
              v-for="(item, index) in modelList"
              :key="index"
              :label="item.label"
              :value="item.id"
            ></el-option>
          </el-select>

          <div class="bf38813a">
            <div
              role="button"
              aria-disabled="true"
              class="f6d670 bcc55ca1"
              @click="handleStart"
              :class="{ able: value }"
              v-if="!props.state"
            >
              <div class="f286936b">
                <div
                  class="ds-icon"
                  style="font-size: 16px; width: 16px; height: 16px"
                >
                  <svg
                    width="14"
                    height="16"
                    viewBox="0 0 14 16"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M7 16c-.595 0-1.077-.462-1.077-1.032V1.032C5.923.462 6.405 0 7 0s1.077.462 1.077 1.032v13.936C8.077 15.538 7.595 16 7 16z"
                      fill="currentColor"
                    ></path>
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M.315 7.44a1.002 1.002 0 0 1 0-1.46L6.238.302a1.11 1.11 0 0 1 1.523 0c.421.403.421 1.057 0 1.46L1.838 7.44a1.11 1.11 0 0 1-1.523 0z"
                      fill="currentColor"
                    ></path>
                    <path
                      fill-rule="evenodd"
                      clip-rule="evenodd"
                      d="M13.685 7.44a1.11 1.11 0 0 1-1.523 0L6.238 1.762a1.002 1.002 0 0 1 0-1.46 1.11 1.11 0 0 1 1.523 0l5.924 5.678c.42.403.42 1.056 0 1.46z"
                      fill="currentColor"
                    ></path>
                  </svg>
                </div>
              </div>
            </div>
            <div
              v-else
              role="button"
              aria-disabled="false"
              class="f6d670"
              @click="handleStop"
            >
              <div class="f286936b"><div class="be24146b"></div></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits, watch, nextTick } from "vue";
const modelList = window.modelList;
const value = ref("");
const emits = defineEmits(["chat", "change"]);
const props = defineProps(["text", "state"]);
const modelId = ref(sessionStorage.getItem("modelId") || modelList[0].id);

if (props.text) {
  value.value = props.text;
}
const handleEnter = (e) => {
  if (e && e.shiftKey) {
  } else {
    e && e.preventDefault();
    if (!value.value) return;
    emits("chat", value.value);
    nextTick(() => {
      value.value = "";
    });
  }
};
const handleStart = () => {
  if (!value.value) return;
  handleEnter();
  // chating.value = true;
};
const handleStop = () => {
  emits("chat", false);
};
const handleSelect = (value) => {
  sessionStorage.setItem("modelId", value);
  const result = modelList.find((item) => item.id === value);
  emits("change", { type: "modelId", data: result });
};
</script>
<style lang="scss" scoped>
.el-select {
  ::v-deep {
    .el-select__wrapper {
      border-radius: 16px;
    }
  }
}
</style>
